#include("common.html")
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>品牌详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="#(tpath)/static/css/element.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/basic.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script src="#(tpath)/static/js/jquery.js"></script>
    <script src="#(tpath)/static/js/common.js"></script>
  </head>
  
  <body class="">
    #include("header.html")
    <style type="text/css">#brand_detail{ background-color: #f6f6f6; } .brand_detailbg { background: #f5f5f5; } .allwarp .breadcrumbs { clear: both; height: 44px; line-height: 44px; color: #999; width: 1200px; margin: 0 auto; } .allwarp .clearfix { zoom: 1; } .allwarp .breadcrumbs li { float: left; font-size: 12px; } .allwarp .breadcrumbs a, .breadcrumbs a:visited { color: #737574; } .brand_detailbg .brand_intro { min-height: 70px; background: #fff; padding: 25px 45px; } .brand_detailbg .brand_intro .brand_img { width: 150px; height: 60px; text-align: center; line-height: 60px; } .brand_detailbg .brand_intro .brand_img img { width: 106px; height: 54px; border: 1px solid #eee; } .brand_detailbg .brand_intro .brand_text { width: 910px; margin: 0 20px; color: #666467; line-height: 22px; } .brand_detailbg .brand_intro .brand_text h1 { color: #000; font-size: 16px; font-weight: bold; border-bottom: 2px solid #ddd; float: left; margin-bottom: 5px; } .col-main .mod-list li { transition-property: box-shadow; transition-duration: 1s; -moz-transition-property: box-shadow; -moz-transition-duration: 1s; -webkit-transition-property: box-shadow; -webkit-transition-duration: 1s; -o-transition-property: box-shadow; -o-transition-duration: 1s; } .col-main .mod-list li:hover{box-shadow: 0 0 20px #cacaca;} .col-main .mod-list:after{content:'\20';display:block;height:0;clear:both} .col-main .mod-item { border: 4px solid #fff; background-color: #fff; font-size: 12px; text-align: center; position: relative; } .col-main .mod-item .pic { display: block; padding-top: 10px; position: relative; width: 215px; height: 215px; overflow: hidden; margin: 0 auto 10px; border: none !important; } .col-main .list-item.hover .mod-item{height:auto;} .col-main .mod-item .pic img { max-width: 200px; max-height: 200px; border: none !important; } .col-main .mod-item .name { display: block; color: #413f40; overflow: hidden; font-size: 14px; margin: 3px auto; height: 18px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } .col-main .mod-item .price { font-size: 14px; color: #f15151; } .col-main .list-item { position: relative; float: left; width: 230px; height: 300px; overflow: hidden; margin: 5px 5px 25px 5px; background: #fff; } .goods-stock{ position: absolute; width: 222px; height: 215px; opacity:0.5; background-color: #000; left: 0px; top: 0px; text-align: center; color: #fff; line-height: 215px; font-size: 20px; font-weight: 600; z-index: 100; }</style>
    <div id="brand_detail">
      <div class="col-main brand_detailbg">
        <div class="allwarp">
          <div class="breadcrumbs">
            <ul class="clearfix">
              <li class="home">
                <a href="#">首页</a>
                <span>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</span></li>
              <li class="home">
                <a href="#">热门品牌</a>
                <span>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</span></li>
              <li class="home">
                <a href="#">#(brand.name)</a>
                <span>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</span></li>
            </ul>
          </div>
          <div class="brand_intro">
            <div class="fl brand_img">
              <img src="#(imageUrl(brand.image))" alt="Karicare"></div>
            <div class="fl brand_text">
              <h1>#(brand.name)</h1>
              <div class="cl"></div>#(brand.remark)</div>
            <div class="cl"></div>
          </div>
          <br>
          <ul class="mod-list">
          
          	#for(product : page.list)
            <li class="list-item">
              <div class="mod-item">
                <!---->
                <a href="#(product.path)" class="pic">
                  <img src="#(imageUrl(product.image))" width="200px" height="200px"></a>
                <p class="name">#(product.name)</p>
                <p class="price">￥#(product.price)</p>
                </div>
            </li>
            #end
            <div class="cl"></div>
          </ul>
          <br>
          #pagination(pageNumber = page.pageNumber,totalPages = page.totalPage,pattern = "")
				<div class="allwarp">
              <div class="fr" style="margin-top: 50px;">
                <div class="el-pagination is-background">
                  <span class="el-pagination__total">共 #(page.totalRow) 条</span>
                  <button type="button" #if(hasPrevious) onclick="location.href='#(base)/brand/detail/#(brand.id)?pageNumber=#(previousPageNumber)'" #else disabled="disabled" #end class="btn-prev">
                    <i class="el-icon el-icon-arrow-left"></i>
                  </button>
                  <ul class="el-pager">
                  	#for(segmentPageNumber : segment)
						#if(segmentPageNumber != pageNumber)
							<li class="number" onclick="location.href='#(base)/pinpai/detail/#(brand.id)?pageNumber=#(segmentPageNumber)'">#(segmentPageNumber)</li>
						#else
							<li class="number active">#(segmentPageNumber)</li>
						#end
					#end
                  <button type="button" class="btn-next" #if(hasNext) onclick="location.href='#(base)/pinpai/detail/#(brand.id)?pageNumber=#(nextPageNumber)'" #else disabled="disabled" #end>
                    <i class="el-icon el-icon-arrow-right"></i>
                  </button>
                </div>
              </div>
              <div class="cl"></div>
            </div>			        
			#end
        </div>
      </div>
    </div>
    #include("footer.html")
  </body>

</html>